import React, { useEffect, useState, memo } from 'react'
import { Table, Space, Button, Modal } from 'antd'
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'

const Hotel = ({ dataOfHotel }) => {
  const [transData, setTransData] = useState(null)
  const [listData, setListData] = useState(null)
  const [drawData, setDrawData] = useState(null)


  useEffect(() => {
    if (dataOfHotel) {
      setDrawData(dataOfHotel[0])
      setTransData(dataOfHotel[1])
    }
  }, [dataOfHotel])

  useEffect(() => {
    if (transData) {
      const computerTotal = (target) => {
        let total = target.reduce((a, b) => {
          return {
            hotelRoomNumber: a.hotelRoomNumber + b.hotelRoomNumber,
            livedNumberInTime: a.livedNumberInTime + b.livedNumberInTime,
            hotelTotalRoomNumberInTime: a.hotelTotalRoomNumberInTime + b.hotelTotalRoomNumberInTime,
            costInTime: a.costInTime + b.costInTime,
            lastIncomeInTime: a.costInTime + b.costInTime,
            getIncomeInTime: a.getIncomeInTime + b.getIncomeInTime,
            notGetIncomeInTime: a.notGetIncomeInTime + b.notGetIncomeInTime,
          }
        }, {
          hotelRoomNumber: 0,
          livedNumberInTime: 0,
          hotelTotalRoomNumberInTime: 0,
          livedRateInTime: 0,
          costInTime: 0,
          lastIncomeInTime: 0,
          getIncomeInTime: 0,
          notGetIncomeInTime: 0
        })
        total.key = 0
        total.name = '总计'
        total.livedRateInTime = total.livedNumberInTime / total.hotelTotalRoomNumberInTime
        target.unshift(total)
        return target
      }

      const obj = computerTotal(transData)

      const listData = obj.map((hotel) => (

        {
          key: hotel.key,
          name: hotel.name,
          hotelRoomNumber: hotel.hotelRoomNumber,
          livedNumberInTime: hotel.livedNumberInTime,
          hotelTotalRoomNumberInTime: hotel.hotelTotalRoomNumberInTime,
          livedRateInTime: Number(hotel.livedRateInTime * 100).toFixed(2) + '%',
          costInTime: hotel.costInTime,
          lastIncomeInTime: hotel.costInTime,
          getIncomeInTime: hotel.getIncomeInTime,
          notGetIncomeInTime: hotel.notGetIncomeInTime

        }
      ))
      setListData(listData)
    }

  }, [transData])

  /* useEffect(() => {
    if (drawData) {
      console.log(drawData)
      document.getElementById('Hotel').innerHTML = ""
      draw(drawData)
    }
  }, [drawData])

  const draw = (drawData) => {

    const chart = new Chart({
      container: 'Hotel',
      autoFit: true,

      height: 500,
      padding: 0,
    })

    const ds = new DataSet()
    const dv = ds
      .createView()
      .source(drawData)



    console.log(dv.rows)
    const view1 = chart.createView({
      padding: [8, 8, 48, 64],
    })
    view1.data(dv.rows)
    view1.scale('number', {
      range: [0, 0.9],
      nice: true,

      alias: '酒店当日入住房间数',


    })

    view1.tooltip({
      showMarkers: false,
      shared: true,
    })
    view1.axis('number', {
      label: null,
      title: {
        offset: 30,
      },
    })

    view1
      .interval()
      .position('from*number')
      .label('number')
      .color('name')
      .adjust([
        {
          type: 'dodge',
          marginRatio: 0.2,
        },
      ])
    chart.interaction('legend-highlight')
    chart.removeInteraction('legend-filter') // 移除默认的 legend-filter 数据过滤交互
    chart.interaction('legend-visible-filter') // 使用分类图例的图形过滤
    chart.render()

  } */

  const showModal = (name, roomsNumber) => {
    let detati = []
    if (name === '总计') {
      detati = drawData.reduce((total, cur, index) => {
        let hasValue = total.findIndex(current => { return current.from === cur.from })
        hasValue === -1 && total.push(cur)
        hasValue !== -1 && (total[hasValue].number = total[hasValue].number + cur.number)
        return total
      }, [])
      detati.sort(function (a, b) {
        return new Date(b.from) - new Date(a.from)
      })
      console.log(detati)
    } else {
      detati = drawData.filter(data => data.name === name)
      detati.sort(function (a, b) {
        return new Date(b.from) - new Date(a.from)
      })

    }

    console.log(detati)
    const listData = detati.map((room) => (
      {
        key: room.name,
        time: room.from,
        livedNumber: room.number,
        roomsNumber: roomsNumber,
        livedRate: (room.number / roomsNumber * 100).toFixed(2) + '%',

      }
    ))
    const columns = [
      {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
      },
      {
        title: '入住数',
        dataIndex: 'livedNumber',
        key: 'livedNumber',
      },
      {
        title: '酒店房间数',
        dataIndex: 'roomsNumber',
        key: 'roomsNumber',
      },
      {
        title: '入住率',
        dataIndex: 'livedRate',
        key: 'livedRate',
      },]
    Modal.info({
      title: name,
      width: 1000,
      content: (
        <div>
          <Table dataSource={listData} columns={columns} />
        </div>
      ),
      onOk () { },
    })
  }

  const columns = [
    {
      title: '酒店名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '酒店房间数',
      dataIndex: 'hotelRoomNumber',
      key: 'hotelRoomNumber',
    },
    {
      title: '时间内入住数',
      dataIndex: 'livedNumberInTime',
      key: 'livedNumberInTime',
    },
    {
      title: '时间内酒店总房间数',
      dataIndex: 'hotelTotalRoomNumberInTime',
      key: 'hotelTotalRoomNumberInTime',
    },
    {
      title: '时间内入住率',
      dataIndex: 'livedRateInTime',
      key: 'livedRateInTime',
    },
    {
      title: '时间内产生费用',
      dataIndex: 'costInTime',
      key: 'costInTime',
    },
    {
      title: '时间内应收',
      dataIndex: 'lastIncomeInTime',
      key: 'lastIncomeInTime',
    },
    {
      title: '时间内实收',
      dataIndex: 'getIncomeInTime',
      key: 'getIncomeInTime',
    },
    {
      title: '时间内未收',
      dataIndex: 'notGetIncomeInTime',
      key: 'notGetIncomeInTime',
    },
    {
      title: '操作',
      dataIndex: '',
      render: (_, record) => (
        <Space size="middle">
          <Button onClick={() => showModal(record.name, record.hotelRoomNumber)}> 查看</Button>

        </Space>
      )
    },
  ]
  return (
    <>
      <div id="Hotel">

      </div>
      <Table dataSource={listData} columns={columns} />

    </>
  )
}

export default memo(Hotel)